<template>
    <el-container direction="vertical">
        <topbar/>

        <section>

        </section>

        <el-dialog
                :visible.sync="loginDialog.visible"
                title="登录数据库"
                :close-on-click-modal="false"
                width="660px"
        >
            <el-form ref="loginForm" :model="loginForm" label-width="100px">
                <el-form-item label="数据库：">
                    <el-radio-group v-model="loginForm.dbtype" @change="onDbTypeChange">
                        <el-radio v-for="db in dbs" :key="db.name" :label="db.name" :disabled="db.disabled">
                            <i :class="['diconfont', db.icon]"></i>
                            <span>{{db.name}}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="驱动：">
                    <el-input v-model="loginForm.driver" placeholder="Driver" clearable></el-input>
                </el-form-item>
                <el-form-item label="URL：">
                    <el-input v-model="loginForm.url" placeholder="Address" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户名：">
                    <el-input v-model="loginForm.username" placeholder="Username" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="loginForm.password" type="password" placeholder="Password"
                              clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>
</template>

<script>
    import Topbar from "../components/main/Topbar";

    export default {
        name: "main-view",
        components: {Topbar},
        data() {
            return {
                dbs: {
                    'MySQL': {
                        name: 'MySQL',
                        icon: 'dicon-mysql',
                        disabled: false,
                        def: {
                            user: 'root',
                            driver: 'com.mysql.cj.jdbc.Driver',
                            url: 'jdbc:mysql://localhost:3306/',
                        },
                    },
                    'Oracle': {
                        name: 'Oracle',
                        icon: 'dicon-oracle',
                        disabled: false,
                        def: {
                            user: 'orcl',
                            driver: 'oracle.jdbc.driver.OracleDriver',
                            url: 'jdbc:oracle:thin:@localhost:1521:orcl',
                        },
                    },
                    'SQLServer': {
                        name: 'SQLServer',
                        icon: 'dicon-sqlserver',
                        disabled: false,
                        def: {
                            user: 'sa',
                            driver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
                            url: 'jdbc:sqlserver://localhost:1433;DatabaseName=xxx',
                        }
                    },
                },
                loginDialog: {
                    visible: this.$store.state.common.loginDialogVisible,
                },
                loginForm: {
                    dbtype: "MySQL",
                    driver: 'com.mysql.cj.jdbc.Driver',
                    url: 'jdbc:mysql://localhost:3306/',
                    username: 'root',
                    password: '',
                },
            }
        },

        computed: {
            loginDialogVisible() {
                return this.$store.state.common.loginDialogVisible
            },
        },

        watch: {
            'loginDialog.visible'(visible) {
                this.$store.dispatch('toggleLoginDialog', {visible});
            },
            loginDialogVisible(value) {
                this.loginDialog.visible = value;
            },
        },

        methods: {
            onDbTypeChange(value) {
                this.loginForm.driver = this.dbs[value].def.driver;
                this.loginForm.username = this.dbs[value].def.user;
                this.loginForm.url = this.dbs[value].def.url;
            },
        },

        mounted() {

        },
    }
</script>

<style scoped lang="scss">

</style>
